<template>
    <div>
        <el-dialog
          title="收费设置"
          :visible.sync="showchange"
          :show-close="false"
          :close-on-click-modal="false"
          width="30%"
          > 
           <el-form  v-model="formcharge" label-width="100px" class="demo-ruleForm">
              <el-form-item label="机构名称" prop="name">
                  <el-select  @change="change" style="width:100%" v-model="a" placeholder="请选择机构">
                     <el-option
                        v-for="(item,index) in  alllist"
                        :key="index"
                        :label="item.org_name"
                        :value="item.identification">
                      </el-option>
                </el-select>
            </el-form-item>
            <!-- //价格 -->
            <el-form-item  v-for='(item,index) in formcharge.set_info' :key="index" label="收费标准">
            <el-row type="flex"  justify="space-between">
                <i @click="detcherge(item.id)" class="el-icon-remove-outline"></i>
                <el-col :span="10">
                    <el-input type="number" v-model="item.money" placeholder=""></el-input>
                </el-col>
                <el-col :span="10">
                   <el-input type="number" v-model="item.years" placeholder=""></el-input>
                     <!-- <el-select  @change='checkkey'  v-model="item.years" placeholder="请选择年限">
                            <el-option
                               v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                             </el-option>
                     </el-select>    -->
                </el-col>     
            </el-row>   
            </el-form-item>
            <el-form-item label="" prop="name">
              <el-row>
                <el-col :span='22'>
                   <el-button  @click="addshoufei" class="okchange" style="width:96%" type="info" >添加收费标准</el-button>
                </el-col>
              </el-row>
            </el-form-item>
        </el-form>
          <hr>
        <el-row type="flex" >
          <el-col :push="2" span:10>
              <el-button @click='dtecharge' style="width:80%"  :push='3' type="info" >取消</el-button>
          </el-col>
            <el-col :push="1" span:10>
              <el-button  @click='okcharge' style="width:80%" class="addbtn" >确定</el-button>
          </el-col>
        </el-row>    
        </el-dialog>
    </div>
</template>
<script>
import   {editcharge,requiremerge,alljigoulist} from '@/api/menu/index.js'
import {mapState} from "vuex"
export default {
    name:'addshoufei',
    props:{
        showchange:{
            type:Boolean,
            default:false
        },
        tableData:{
          type:Array,
          default:[] 
        }
    },
    data(){
        return {
          a:'',
          alllist:[],
          formcharge:{
            identification:'',
            set_info:[
              // {
              //   money:0,
              //   years:0
              // }
            ]
          },
           //机构列表
        }
    },
    methods:{
      //下拉框数据发生变化触发
      change(val){
       this.getmergelist({identification:val})
      },
      //添加收费标准
        addshoufei(){
          var that = this
          this.formcharge.set_info.push({money:0,years:'1',id:that.formcharge.set_info.length})
        },
        // 查询收费标准
         async getmergelist(data){
           const val = data
          console.log(val);
          const a  = await requiremerge(val)
          // this.formcharge.set_info = data.datas.set_info
          this.formcharge.set_info = a.data.datas
          console.log(a);
        },
          //收费标准确定
        async okcharge(){
           const data  =  await editcharge(this.formcharge)
            this.$emit('update:showchange', false)
        },
        //删除收费
        detcherge(val){
          var index = this.formcharge.set_info.findIndex(item=>item.id==val)
          this.formcharge.set_info.splice(index,1)
        },
        //收费标准取消
        dtecharge(){
        this.$emit('update:showchange', false)
        },
        // 获取机构列表
        async getalljigoulist(){
          const data = await alljigoulist({admin_id:this.userInfo.admin_id})
          this.alllist =  data.data
        }
    },
    computed:{
      ...mapState(['userInfo'])
    },
    watch:{
      tableData:{
        handler(val){
          this.jigoulist = val
          console.log(this.jigoulist);
        }
      }

    },
    created(){
        // 查询收费标准
       this.getalljigoulist()
      // this.getmergelist()
  
    }
}
</script>
<style lang="less" scoped>
  hr {
    opacity: 0.5;
    width: 108%;
    margin-top: 50px;
    margin-left: -4%;
    margin-bottom: 15px;
    color: #999;
  }
  .okchange {
    background-color: #fff;
    border: 1px solid #009380;
    color: #009380;
  }
  /deep/ .el-icon-remove-outline {

    line-height: 3!important;
  }
  /deep/ .el-dialog__body {

    padding-right: 100px!important;
  }


</style>